<template>
  <div class="factor-rule">
    <basic-container>
      <avue-crud
        :option="option"
        :data="data"
        :page.sync="page"
        @on-load="onLoad"
        :search.sync="search"
        @row-save="rowSave"
        @refresh-change="onLoad"
        @row-update="rowUpdate"
        @row-del="rowDel"
        v-model="form"
      >
        <template slot-scope="{ type, size, row }" slot="menu">
          <el-button size="small" plain @click="handleSelectClick(row)">
            选择
          </el-button>
        </template>
      </avue-crud>

      <avue-tabs
        :option="tabsOption"
        @change="handleChange"
        v-if="!!gaugeFactorId"
      ></avue-tabs>
      <ScoreDescription
        v-if="type.prop === 'scoreDescription'"
        :gaugeId="gaugeId"
        :gaugeFactorId="gaugeFactorId"
      ></ScoreDescription>
      <WarningScore
        v-if="type.prop === 'warningScore'"
        :gaugeId="gaugeId"
        :gaugeFactorId="gaugeFactorId"
      ></WarningScore>
    </basic-container>
  </div>
</template>

<script>
import ScoreDescription from "./score-description.vue";
import WarningScore from "./warning-score.vue";
import {
  saveFactor,
  getFactorList,
  updateFactor,
  deleteFactor,
} from "@/api/scale";

export default {
  name: "FactorRule",
  components: { ScoreDescription, WarningScore },
  props: {
    gaugeId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      user: {},
      search: {},
      promote: true,
      page: {
        pageSize: 20,
      },
      option: {
        addBtnText: "添加因子公式",
        excelBtn: false,
        delBtn: true,
        border: true,
        index: false,
        expandLevel: 3,
        headerAlign: "left",
        align: "left",
        tree: false,
        labelWidth: 100,
        menuWidth: 380,
        column: [
          {
            width: 130,
            label: "因子名称",
            prop: "factorName",
            rules: [
              {
                required: true,
                message: "请输入因子名称",
                trigger: "blur",
              },
            ],
          },
          {
            label: "略号",
            prop: "abbreviation",
            // type: "icon",
            // formslot: true,
            // searchslot: true,
            // search: true,
            rules: [
              {
                required: true,
                message: "请输入略号",
                trigger: "blur",
              },
            ],
          },
          // {
          //   label: "是否总分",
          //   prop: "totalFlag",
          //   type: "radio",
          //   dicData: [
          //     {
          //       label: "是",
          //       value: "Y"
          //     },
          //     {
          //       label: "否",
          //       value: "N"
          //     }
          //   ],
          //   span: 6
          // },
          {
            width: 130,
            label: "因子类型",
            prop: "factorTypeId",
            type: "select",
            dicUrl: "/api/blade-system/dict/dictionary?code=warning_type",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "string",
            change: () => {
              this.$nextTick(() => {
                this.form.factorTypeName = this.form.$factorTypeId;
              });
            },
            rules: [
              {
                required: true,
                message: "请输入因子类型",
                trigger: "blur",
              },
            ],
          },
          {
            label: "因子公式",
            prop: "formula",
            type: "textarea",
            span: 24,
            overHidden: true,
            minRows: 3,
            maxRows: 3,
            rules: [
              {
                required: true,
                message: "请输入因子公式",
                trigger: "blur",
              },
            ],
          },
          {
            label: "原始总分",
            prop: "sumFormula",
            type: "textarea",
            maxLength: 100,
            span: 24,
            minRows: 3,
            maxRows: 3,
            overHidden: true,
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入原始总分",
            //     trigger: "blur",
            //   },
            // ],
          },
          // {
          //   label: "平均分",
          //   prop: "averageFormula",
          //   type: "textarea",
          //   minRows: 3,
          //   maxRows: 3,
          //   span: 24,
          //   overHidden: true,
          // },
          // {
          //   label: "标准差",
          //   prop: "standardFormula",
          //   type: "textarea",
          //   minRows: 3,
          //   maxRows: 3,
          //   span: 24,
          //   overHidden: true,
          // },
          {
            label: "计分公式",
            prop: "calculationFormula",
            type: "textarea",
            minRows: 3,
            maxRows: 3,
            span: 24,
            overHidden: true,
            // rules: [
            //   {
            //     required: true,
            //     message: "请输入标准差",
            //     trigger: "blur",
            //   },
            // ],
          },
          // {
          //   label: "计分方式",
          //   prop: "sex"
          // },
          {
            label: "备注",
            type: "textarea",
            minRows: 3,
            maxRows: 3,
            span: 24,
            prop: "suggest",
            overHidden: true,
          },
        ],
      },
      data: [],
      type: { prop: "" },
      tabsOption: {
        column: [
          {
            icon: "el-icon-info",
            label: "得分解释",
            prop: "scoreDescription",
          },
          {
            icon: "el-icon-warning",
            label: "预警分值",
            prop: "warningScore",
          },
        ],
      },
      gaugeFactorId: "",
    };
  },
  methods: {
    handleChange(column) {
      this.type = column;
    },
    async onLoad(page = this.page, params = {}) {
      //模拟分页
      // this.page.total = 40;
      const {
        data: { data },
      } = await getFactorList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query, { gaugeId: this.gaugeId })
      );
      this.data = data.records;
      console.log(this.data);
      this.page.total = data.total;
    },
    goToDetailsList() {
      this.$router.push({ name: "试题详情列表" });
    },
    goToResultSet() {
      this.$router.push({ name: "结果列表" });
    },
    handleAdd() {
      this.$router.push({ name: "量表信息" });
    },
    async rowSave(form, done, loading) {
      form.gaugeId = this.gaugeId;
      await saveFactor(form);

      loading();

      this.onLoad();

      done(form);
    },
    async rowUpdate(form, index, done, loading) {
      form.gaugeId = this.gaugeId;
      await updateFactor(form);

      loading();

      done(form);
    },
    async rowDel(form) {
      await deleteFactor({ ids: form.gaugeFactorId });
      this.onLoad(this.page);
    },
    handleSelectClick(row) {
      this.gaugeFactorId = row.gaugeFactorId;
      this.type.prop = this.type.prop || "scoreDescription";
    },
  },
};
</script>

<style lang="scss" scoped>
.factor-rule {
}
</style>
